/* eslint-disable jsx-a11y/alt-text */
import { Button, message, Modal, Upload } from 'antd';
import React, { useState } from 'react';

import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
import { UploadOutlined } from '@ant-design/icons';

export default function TestPage() {
  // 声明一个fileList
  const [flieList, setFlieList] = useState([]);

  const [imgSrc, setImgSrc] = useState('');
  const props = {
    // accept,点击上传时,默认显示要上传图片的类型
    accept: '.png,.jpg,.jpeg,.gif',
    // name是要上传的图片类型,一般有后台规定
    name: 'image',
    action: `${baseURL}/v1_0/upload`,
    headers: {
      authorization: `Bearer ${getToken()}`,
    },
    onChange(info) {
      // 保存上传图片的信息
      setFlieList(info.fileList);
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 图片上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 图片上传失败`);
      }
    },
    // 图片预览
    onPreview(file) {
      // console.log(file);
      setImgSrc(file.thumbUrl);
    },
    // 图片上传前的回调
    beforeUpload(file, fileList) {
      console.log(file);
      // 白名单
      const whiteList = ['image/png', 'image/jpg', 'image/gif', 'image/jpeg'];
      if (!whiteList.includes(file.type)) {
        message.warning('不支持上传图片类型', 2);
        return Upload.LIST_IGNORE;
      }
    },
  };
  return (
    <>
      <Modal
        maskClosable={false}
        title="图片预览"
        visible={!!imgSrc}
        footer={null}
        onCancel={() => setImgSrc('')}
      >
        <div style={{ textAlign: 'center' }}>
          <img
            style={{ width: '480px', objectFit: 'cover' }}
            src={imgSrc}
          ></img>
        </div>
      </Modal>
      <Upload {...props} listType="picture-card">
        {flieList.length === 3 ? null : (
          <Button icon={<UploadOutlined />}></Button>
        )}
      </Upload>
    </>
  );
}
